<template>
   <div class="items_header">
    <p class="item_titles">{{ props.item?.title }}</p>
    <!-- <p>{{ props.item?.createAt }}</p>
    <p>{{ dayjs().format()}}</p> -->
    <span class="item_tit_span"><strong>|</strong>
      {{ Math.abs(dayjs().diff(dayjs(props.item?.createAt),'day')) }}
      天前</span>
   </div>
   <div class="items_bottom">
     <img :src="props.item?.cover"  v-if="props.item?.cover" class="items_imgs" alt="">
      <div class="item_iconss">
        <span><heart-outlined />  {{ props.item?.likes }}</span>  ·  
        <span> <eye-outlined />  {{ props.item?.views }}</span>  ·  
        <span> <share-alt-outlined />  分享</span>
      </div>
   </div>
</template>

<script setup lang="ts">
import {HeartOutlined,EyeOutlined,ShareAltOutlined } from '@ant-design/icons-vue';
import {defineProps} from "vue"
import dayjs from 'dayjs'
import {useRouter} from "vue-router"
let router = useRouter()

let props = defineProps({
    item:{
        type:Object
    },
    id:{
      type:String
    }
})

// console.log(props.item,"item")
</script> 

<style lang="scss">
.items_header{
  display: flex;
  align-items: center;
  height: 33px;
}
.item_titles{
  font-weight: bold;
  font-family: "华文楷体";
  cursor: pointer;
  // line-height: 33px;
}
.item_titles:hover{
  color: pink;
}
.item_tit_span{
  color: #ccc;
  margin: 0 13px 14px;
  strong{
    opacity: 0.6;
  }
}
.items_imgs{
  width: 220px;
  height: 100px;
  object-fit: cover;
  display: block;
}
.items_bottom{
  display: flex;
  align-items: end;
}
.item_iconss{
  padding: 0 12px;
  color: #ccc;
  span{
    cursor: pointer;
  }
}
</style>